{extend name='base_html/base'/}
{block name="style"}
<style>

    * {
        margin: 0;
        padding: 0;
    }

    body {
        background-color: #eeeeee;
    }

    .container {
        width: 960px;
        height: 350px;
        margin: 60px auto;
        position: relative;
        display: flex;
        flex-direction: column;
        flex: 1;
    }

    .pic {
        width: 150px;
    }

    .container img {
        padding: 10px 10px 15px;
        background: white;
        border: 1px solid #ddd;
        box-shadow: 2px 2px 3px rgba(50, 50, 50, 0.4);
        -webkit-transition: all 0.5s ease-in;
        -moz-transition: all 0.5s ease-in;
        -ms-transition: all 0.5s ease-in;
        -o-transition: all 0.5s ease-in;
        transition: all 0.5s ease-in;
        z-index: 0;
    }

    .container img:hover {
        transform: rotate(0deg) scale(2.50);
        z-index: 100;
    }

    .pic1 {
        position: relative;
        transform: rotate(5deg);
        -webkit-transform: rotate(5deg);
    }

    .pic2 {
        position: relative;
        transform: rotate(5deg);
        -webkit-transform: rotate(5deg);
    }

    .pic3 {
        position: relative;
        transform: rotate(5deg);
        -webkit-transform: rotate(5deg);
    }

    .pic4 {
        position: relative;
        transform: rotate(-10deg);
        -webkit-transform: rotate(-10deg);
    }

    .pic5 {
        position: relative;
        transform: rotate(-10deg);
        -webkit-transform: rotate(-10deg);
    }

    .pic6 {
        position: relative;
        transform: rotate(10deg);
        -webkit-transform: rotate(10deg);
    }

    .pic7 {
        position: relative;
        transform: rotate(20deg);
        -webkit-transform: rotate(20deg);
    }

    .pic8 {
        position: relative;
        transform: rotate(5deg);
        -webkit-transform: rotate(5deg);
    }

    .pic9 {
        position: relative;
        transform: rotate(15deg);
        -webkit-transform: rotate(15deg);
    }

</style>
{/block}
{block name="main"}
<div class="container" style="padding: 60px">
    <div style="padding-top:50px ">
        <img class="pic pic1" src="img/1.jpg">
        <img class="pic pic2" src="img/2.jpg">
        <img class="pic pic3" src="img/3.jpg">
        <img class="pic pic4" src="img/4.jpg">
        <img class="pic pic5" src="img/5.jpg">
        <img class="pic pic6" src="img/6.jpg">
        <img class="pic pic7" src="img/7.jpg">
        <img class="pic pic8" src="img/8.jpg">
        <img class="pic pic9" src="img/9.jpg">
    </div>
</div>
{/block}